<template>
	<upper-navigation  url="./MyInformation">个人信息</upper-navigation>
	<view id="Personal">
		<!-- <view class="basic">
			基础信息:
		</view> -->
		<view class="line-container">
			<button class="line-st" @chooseavatar="toAvatar" open-type="chooseAvatar" >
				<view class="title">头像</view>
				<view class="right">
					<image class="avatar" :src="`${user.avatar}`"></image>
				</view>
			</button>
			<view class="under-line"></view>
			<navigator class="line-st" url="./Name">
				<view class="title">昵称</view>
				<view class="right">
					{{ user.nickName }}
					<!-- <span class="right-btn">&gt</span> -->
				</view>
			</navigator>
			<view class="under-line"></view>
			<!-- <navigator class="line-st" url="./Mobile">
				<view class="title">手机号</view>
				<view class="right">
					{{ user.mobile }}
					<span class="right-btn">&gt</span>
				</view>
			</navigator> -->
			<view class="under-line"></view>
		</view>
		<lower-btn url="./MyInformation" @save-click=""></lower-btn>
	</view>
	<bottom-bar></bottom-bar>
</template>

<script>
	// 黄昕焕 @ 2023年6月12日 页面+绑定
	import bottomBar from '@/pages/Community/bottomNavigationBar.vue'
	import upperNavigation from '@/pages/Community/upperNavigation.vue'
	import lowerBtn from '@/pages/ucenter/lowerBtn.vue'
	import { useCurrentUser } from '@/stores/useUser.js'
	const currentUser = useCurrentUser();
	
	export default {
		components: {
			bottomBar,
			upperNavigation,
			lowerBtn,
		},
		data(){
			return{
				user: currentUser.user
			}
		},
		methods: {
			toAvatar: function(e){
				let base64 = uni.getFileSystemManager().readFileSync(e.detail.avatarUrl, 'base64');
				let url = `data:image/jpeg;base64,${base64}`;
				console.log(url);
				currentUser.modifyAvatar(url);
							
							// var self = this;
							// uni.chooseImage({
							//   count: 1,
							//   mediaType: ['image'],
							//   sourceType: ['album', 'camera'],
							//   camera: 'back',
							//   success: async (res) => {
							// 	// console.log(res.tempFiles[0].path)
			    //                 let base64List = await Promise.all(res.tempFiles.map((item, index) => {
			    //                 	return this.tempToBase64(item)
			    //                 }))	
							// 	// console.log(base64List[0])
							// 	// let noPrefix = base64List[0].replace(/^data:image\/\w+;base64,/, '') // replace + 正则 把前缀替换成空
							// 	// console.log(noPrefix)
							// 	self.src = base64List[0];
							// 	// console.log(self.src.length)
							// 	currentUser.modifyAvatar(self.src);
							//   }
							// });
			},
			//blob转base64
			tempToBase64(tempFiles) {
				return new Promise((resolve, reject) => {
					const reader = new FileReader();
					reader.readAsDataURL(tempFiles);
					reader.onload = () => resolve(reader.result);
					reader.onerror = (error) => reject(error);
				});
			},

		}
	}
</script>

<style lang="less">
	@import url(../Community/shared.less);
	@content-size: 25rpx;
	@btn-size: 35rpx;
	@bg-color-l: rgba(235, 243, 248, 1);
	@bg-color-r: #707092;
	@btn-font-color-r:rgba(255, 255, 255, 1);
	#Personal{
		.line-container {
			margin-top: 30rpx;
			padding: 0 50rpx;
			.under-line{
				height: 1rpx;
				background-color: #d4c4c4;
				
			}
			button {
				padding: 0;
				background-color: #fff;
			}
			.button-hover {
				color: #000;
				background-color: rgba(0,0,0,0.1);
				opacity:0.7;
			}
			button::after{
				display: none;
			}
			.line-st {
				height: 120rpx;
				display: flex;
				.title{
					line-height: 120rpx;
					font-size: 30rpx;
				}
				.right {
					flex: 1;
					height: 100%;
					text-align: right;
					color: #5e5e5e;
					font-size: @content-size;
					line-height: 120rpx;
					// background-color: #5e5e5e;
					.right-btn{
						font-size: 40rpx;
					}
					.avatar{
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						background-position: 50% 50%;
						background-size: cover;
					}
				}
			}
		}
	}
</style>
